<template>
  <view class="address-com">
    <picker
      mode="multiSelector"
      :value="multiIndex"
      :range="areaArray"
      range-key="name"
      @change="bindMultiPickerChange"
      @columnchange="bindMultiPickerColumnChange"
    >
      <view class="picker">
        <text v-if="address.length !== 3" :class="['empty', setPlaceholderClass]">请选择省/市/区 </text>
        <text v-else :class="['add_view', setValueClass]">{{ provinceName }} {{ cityName }} {{ areaName }}</text>
      </view>
    </picker>
  </view>
</template>
<script>
import { alladd } from '@/api/join.js';
import { debounce } from '@/utils/optimize';

export default {
  components: {},

  props: {
    address: {
      type: Array,
      required: true,
      default: ['', '', '']
    },
    setPlaceholderClass: {
      type: String,
      default: ''
    },
    setValueClass: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      areaArray: [[], [], []],
      multiIndex: [0, 0, 0],
      provinceName: '',
      cityName: '',
      areaName: '',
      addMap: []
    };
  },

  watch: {
    address: {
      async handler(val) {
        const res = await alladd();
        this.addMap = Object.freeze(res.data.filter((item) => Number(item.id) < 710000));
        this.getMap(val);
      },
      immediate: true
    }
  },
  methods: {
    bindMultiPickerChange: function (e) {
      setTimeout(() => {
        this.provinceName = this.areaArray[0][e.detail.value[0]].name;
        this.cityName = this.areaArray[1][e.detail.value[1]].name;
        this.areaName = this.areaArray[2][e.detail.value[2]].name;
        this.multiIndex = e.detail.value;
        this.$emit('confirm', [
          this.areaArray[0][e.detail.value[0]].id,
          this.areaArray[1][e.detail.value[1]].id,
          this.areaArray[2][e.detail.value[2]].id
        ]);
      }, 300);
    },

    async getMap(arr) {
      if (arr.length === 0) {
        const p = this.addMap.map((item) => Object.freeze(item));
        const c = p[0].city;
        const a = c[0].area;

        this.areaArray = [p, c, a];
      } else if (arr.length === 1) {
        const c = Object.freeze(this.addMap.find((item) => arr[0] === item.id).city);
        const a = c[0].area;
        this.areaArray.splice(1, 2, c, a);
      } else if (arr.length === 2) {
        const a = Object.freeze(this.areaArray[1].find((item) => arr[1] === item.id).area);
        this.areaArray.splice(2, 1, a);
      } else if (arr.length === 3) {
        let c;
        let a;
        let pI = 0;
        let cI = 0;
        let aI = 0;
        const p = Object.freeze(this.addMap);
        pI = p.findIndex((p) => p.id === arr[0]);
        c = Object.freeze(p[pI].city);

        cI = c.findIndex((c) => c.id === arr[1]);
        a = Object.freeze(c[cI].area);

        aI = a.findIndex((a) => a.id === arr[2]);
        this.areaArray = [p, c, a];
        this.multiIndex = [pI, cI, aI];
        this.provinceName = this.areaArray[0][pI].name;
        this.cityName = this.areaArray[1][cI].name;
        this.areaName = this.areaArray[2][aI].name;
      }
    },

    /* eslint-disable no-invalid-this */
    bindMultiPickerColumnChange: debounce(function (e) {
      let data = {
        multiArray: this.areaArray,
        multiIndex: this.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      let pid;
      let cid;

      pid = data.multiArray[0][data.multiIndex[0]].id;
      cid = data.multiArray[1][data.multiIndex[1]].id;

      switch (e.detail.column) {
        case 0:
          this.getMap([pid]);
          this.multiIndex.splice(1, 1, 0);
          this.multiIndex.splice(2, 1, 0);
          break;

        case 1:
          this.getMap([pid, cid]);
          this.multiIndex.splice(2, 1, 0);
          break;

        default:
          break;
      }
    }, 50)
  }
};
</script>

<style lang="scss" scoped>
.colorGrey {
  color: rgba(0, 0, 0, 0.4);
  font-size: 28rpx;
}
.colorGreyDep {
  color: #666;
  font-size: 28rpx;
}
</style>
